<template>
  <el-row id="index" type="flex" justify="center">
    <el-col :span="18">
      <el-row>
        <el-col :span="24" class="banner">
          <el-carousel
            ref="carousel"
            :interval="4000"
            type="card"
            indicator-position="none"
            height="200px"
            @click.native="bannerList[$refs.carousel.activeIndex].link && $router.push(bannerList[$refs.carousel.activeIndex].link)"
          >
            <el-carousel-item v-for="banner in bannerList" :key="banner.id" style="background-color: #ccc;">
              <el-image :src="banner.imagesCover[0].url" fit="fill" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button-group style="width: 100%;margin-top: 20px;">
            <el-button type="primary" class="menuButton" @click="$router.push('/theme1/index')">网站首页</el-button>
            <el-button type="primary" class="menuButton" @click="$router.push('/theme1/cart')">购物车管理</el-button>
            <el-button type="primary" class="menuButton" @click="$router.push('/theme1/noteList')">最新资讯</el-button>
            <el-button type="primary" class="menuButton" @click="$router.push('/theme1/orderList')">订单管理</el-button>
            <el-button type="primary" class="menuButton" @click="$router.push('/theme1/cusMessage')">顾客留言</el-button>
            <el-button type="primary" class="menuButton" @click="$router.push('/theme1/aboutUs')">关于我们</el-button>
            <!--            <el-button type="primary" class="menuButton" @click="$router.push('/theme1/userInfoEdit')">修改注册资料</el-button>-->
          </el-button-group>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="5">
          <el-card class="box-card" shadow="always" style="margin-bottom: 10px;">
            <div class="card-title" style="margin-bottom: 10px;">{{ isLogin ? '欢迎访问系统！' : '会员登录' }}</div>
            <el-form v-if="!isLogin" size="mini" style="margin-top: 20px;">
              <el-form-item label="会员账号">
                <el-input v-model="userForm.username" style="width: 66%" />
              </el-form-item>
              <el-form-item label="会员密码">
                <el-input v-model="userForm.password" style="width: 66%" />
              </el-form-item>
              <el-form-item style="text-align: center">
                <el-button @click="$router.push('/theme1/userInfoEdit')">注册</el-button>
                <el-button @click="login">登录</el-button>
              </el-form-item>
            </el-form>
            <template v-else-if="user">
              <el-avatar :src="user.avatar" class="user-avatar" />
              {{ user.nickname }}
              <div style="text-align: center">
                <el-button type="text" @click="$router.push('/theme1/userInfoEdit')">个人资料</el-button>
                <el-button type="text" @click="logout">退出</el-button>
              </div>
            </template>
          </el-card>
          <el-card class="box-card" shadow="always">
            <div class="card-title">商品分类</div>
            <ul class="type-list">
              <li v-for="cat in cats" :key="cat.id" @click="$router.push('/theme1/list?tagId='+cat.id)"><el-link icon="el-icon-arrow-right">{{ cat.name }}</el-link></li>
            </ul>
          </el-card>
        </el-col>
        <el-col :span="18" style="margin-left: 20px;">
          <el-card class="box-card" shadow="always">
            <div style="font-weight: bold">特价区</div>
            <el-divider />
            <el-row>
              <el-col v-for="(item, index) in goods" :key="index" :span="5" style="margin: 0 20px 20px 0;">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="item.picUrl" class="image" style="border-bottom: 1px #ccc solid">
                  <div style="padding: 14px;">
                    <span>{{ item.name }}</span>
                    <div class="bottom clearfix">
                      <time class="time">{{ item.updateTime }}</time>
                      <el-button type="text" class="button" @click="$router.push('/theme1/view?id='+item.id)">购买</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <div style="font-weight: bold;margin-top: 20px;">新品上市</div>
            <el-divider />
            <el-row>
              <el-col v-for="(item, index) in goods" :key="index" :span="5" style="margin: 0 20px 20px 0;">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="item.picUrl" class="image" style="border-bottom: 1px #ccc solid">
                  <div style="padding: 14px;">
                    <span>{{ item.name }}</span>
                    <div class="bottom clearfix">
                      <time class="time">{{ item.updateTime }}</time>
                      <el-button type="text" class="button" @click="$router.push('/theme1/view?id='+item.id)">购买</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
    <el-button style="position: fixed; bottom: 20px; right: 20px;" type="text" @click="intoAdmin">管理系统</el-button>
  </el-row>
</template>

<script src="./index.js" type="application/javascript"></script>
<style scoped src="./index.css"></style>
